<template>
  <div>
    <h1>QUERY</h1>
    <div>
      <ul>
        <li><input v-model="message" v-on:keyup.enter="querybyname($event.currentTarget.value)" placeholder="edit me" lazy></li>
        <li>
          <p>Message is: {{ message }}</p>
        </li>
        <mu-table :height="height" :enableSelectAll="enableSelectAll">
          <mu-thead>
            <mu-tr>
              <mu-th>title</mu-th>
            </mu-tr>
          </mu-thead>
          <template v-for="item in items">

            <mu-tbody>
              <mu-tr>
                <mu-td>{{ item}}</mu-td>
              </mu-tr>
            </mu-tbody>
          </template>

        </mu-table>
        <mu-pagination :total="total" :showSizeChanger="showSizeChanger" :pageSizeOption="pageSizeOption" @pageSizeChange="handleClick">
        </mu-pagination>
      </ul>
    </div>

  </div>
  </div>
</template>
<script>
  import axios from 'axios'

  export default {
    name: 'axios',
    data: function () {
      return {
        height: '300px',
        multiSelectable: true,
        enableSelectAll: false,
        message: 1,
        items: ['1', '2'],
        total: 130,
        current: 1,
        showSizeChanger: true,
        pageSizeOption: [10, 20, 30, 40]
      }
    },
    methods: {
      handleClick(newIndex) {
        console.log('page size change event', newIndex)
      },
      query() {
        axios.get('http://localhost:3000/apis/querytitlebyName?name=%E6%9C%9D%E9%B2%9C')
          .then(function (response) {
            console.log(response.data[1]);
            var data1 = response.data;

            return data1
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      querybyname(message) {
        let val = 'name=' + message
        console.log(val)
        axios.get('http://localhost:3000/apis/querytitlebyName?' + val)
          .then(response => {
            this.items = response.data;
            this.total = this.items.length;
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
  }

</script>